<template>
  <div class="bank">
    <div class="info">
      <div>
        <img :src="getImg(cardItem.bank_name)" alt="" />
        <h1>{{ cardItem.bank_name }}</h1>
        <span>{{ cardItem.cardType === 1 ? "储蓄卡" : "信用卡" }}</span
        ><br />
        <span class="time"
          >添加时间：{{ moment(cardItem.date).format("YYYYMMDD") }}</span
        >
      </div>
      <div class="num">{{ cardItem.bank_number }}</div>
    </div>
    <div class="delete">
      <span class="text-warning" @click="delCard">移除</span>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import bankList from "@/tool/connectBank";
import { Modal } from "ant-design-vue";
export default {
  name: "index",
  props: {
    cardItem: {
      type: Object
    }
  },
  data() {
    return {
      bankList: bankList
    };
  },
  methods: {
    moment,
    getImg(name) {
      let value = this.bankList.find(value => {
        if (value.text === name) {
          return value;
        }
      });
      if (value) {
        return value.img;
      } else {
        return require("@/assets/bankImg/yinhang.png");
      }
    },
    delCard() {
      let that = this;
      Modal.confirm({
        title: "删除银行卡：",
        content: "您确定要删除该银行卡吗！",
        okText: "确定",
        cancelText: "取消",
        onOk() {
          that.$emit("delCard", that.cardItem.id);
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.bank {
  padding: 30px 39px;
  margin: 27px 20px;
  webkit-box-shadow: 0 0 18px 0 rgba(7, 8, 8, 0.12);
  -moz-box-shadow: 0 0 18px 0 rgba(7, 8, 8, 0.12);
  box-shadow: 0 0 18px 0 rgba(7, 8, 8, 0.12);
  border-radius: 5px;
  .flex_content();
  .flex_justify_space();
  align-items: flex-end;
  img {
    width: 72px;
    float: left;
    margin-right: 25px;
  }
  .num {
    font-size: 39px;
    font-weight: bold;
    margin-top: 32px;
    margin-bottom: 36px;
  }
  .time {
    display: inline-block;
    margin-top: 14px;
  }
  h1 {
    font-size: 30px;
    margin-right: 20px;
    color: #444444;
    display: inline-block;
  }
}
span {
  font-size: 20px;
  color: #999999;
}
</style>
